/**
 * 描述：404页面
 */
<style lang="scss" scoped>
    .hy-error {
        position: relative;
        width: 100%;
        height: 100%;
        user-select: none;
        background: #f1f8fa;
        .hy-error-main {
            position: absolute;
            width: 500px;
            top: 20%;
            left: 50%;
            margin-left: -250px;
            .hy-error-bg {
                position: relative;
                width: 500px;
                height: 184px;
                text-align: center;
                margin-bottom: 30px;
                img {
                    opacity: 0;
                    z-index: 99;
                    width: 464px;
                    height: 184px;
                    transform: translateY(10px);
                    animation: animShowUp .8s 2.1s forwards;
                }
                .hy-error-animate,
                .hy-error-shadow {
                    position: absolute;
                    top: 20px;
                    left: 50%;
                    z-index: 10;
                    margin-left: -80px;
                    width: 160px;
                    height: 179px;
                    img {
                        opacity: 0;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 100;
                        width: 100%;
                        height: 100%;
                        &.animate_1 {
                            transform-origin: 82px 5px;
                            animation: animateRotate 0.6s 0.3s forwards;
                        }
                        &.animate_2 {
                            transform-origin: 148px 75px;
                            animation: animateRotate 0.6s 0.6s forwards;
                        }
                        &.animate_3 {
                            transform-origin: 77px 141px;
                            animation: animateRotate 0.6s 0.9s forwards;
                        }
                        &.animate_4 {
                            transform-origin: 11px 71px;
                            animation: animateRotate 0.6s 1.2s forwards;
                        }
                        &.animate_5 {
                            transform-origin: 89px 146px;
                            animation: animateRotate 0.5s 1.6s forwards;
                        }
                        &.animate_shadow {
                            transform: translateY(-10px);
                            animation: animDown 0.8s 1.9s forwards;
                        }
                    }
                }
            }
            p {
                opacity: 0;
                line-height: 18px;
                font-size: 18px;
                text-align: center;
                font-weight: 100;
                color: #254f8c;
                transform: translateY(-20px);
                animation: animShowDown .8s 2.1s forwards;
                a {
                    display: inline-block;
                    padding: 0 4px;
                    font-size: 18px;
                    color: #ef5c6e;
                }
            }
        }
    }
    @keyframes animateRotate {
        0% {
            opacity: 0;
            transform: rotate(-43deg);
        }
        100% {
            opacity: 1;
            transform: rotate(0);
        }
    }
    @keyframes animDown {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes animShowUp {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes animShowDown {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
<template>
    <div class="hy-error">
        <div class="hy-error-main">
          <div style="margin:10px auto;width:300px;height: auto;">
            <img src="/static/images/web/company/404.png" width="100%" height="100%" alt="ing">
          </div>
            <p>你迷路了...别着急，点<a href="javascript: void(0);" v-go-back>这里</a>找到出路</p>
        </div>
    </div>
</template>
